<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <!--顶部栏-->
    <el-menu
            :default-active="activeIndex1"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            style="text-align: right"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="cart.html">我的购物车</a></el-menu-item>
        <el-menu-item index="2" v-if="flag">欢迎{{username}}</el-menu-item>
        <el-menu-item index="3" v-if="flag"><a href="#" @click="logout">注销</a></el-menu-item>
        <el-menu-item index="2" v-if="!flag">
            请先<a href="login.html">登陆</a>
        </el-menu-item>
        <el-menu-item index="3" v-if="!flag">
            没有账号，那就<a href="register.html">注册</a>
        </el-menu-item>
    </el-menu>
    <!---图书列表展示区域-->
    <div class="goods-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-input
                        v-model="searchQuery"
                        placeholder="搜索商品..."
                        style="width: 300px; margin-bottom: 20px"
                        clearable
                >
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 20px">
                <el-card :body-style="{ padding: '0px' ,height:'230px'}" shadow="hover">
                    <div class="goods-image" :style="{ 'background-image': 'url(' + item.image + ')' }"></div>
                    <div style="padding: 14px;">
                        <h4>{{ item.bookName.substring(0, 15) }}</h4>
                        <div class="goods-info">
                            <el-row gutter="20">
                                <el-col span="12">
                                    <el-avatar shape="square" :size="100" :src="item.image"></el-avatar>
                                </el-col>
                                <el-col span="12">
                                    <span class="price">¥{{ item.price }}元</span>
                                    <span class="stock" v-if="item.stockNumber!==0">库存: {{item.stockNumber}}</span>
                                    <span class="stock" v-else style="color: red">缺货</span>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="bottom clearfix">
                            <el-button type="primary" size="mini">查看详情</el-button>
                            <el-button type="success" size="mini" :disabled="item.stockNumber===0"
                                       @click="addCart(item.id,item.stockNumber)">
                                加入购物车
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</div>
</body>
</html>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex1: 1,
                token: localStorage.getItem('token'),
                username: '',
                flag: true,
                searchQuery: '',
                goodsList: []
            }
        },
        methods: {
            logout() {
                axios({
                    method: 'get',
                    url: 'users',
                    params: {
                        method: 'logout'
                    }
                }).then(resp => {
                    if (resp.data.success) {
                        localStorage.removeItem('token')
                        this.flag = false
                        this.username = ''
                        this.token = null
                    }
                })
            },
            loadBooksData() {
                axios({
                    url: 'books',
                    method: 'get',
                    params: {
                        method: 'find'
                    }
                }).then(resp => {
                    this.goodsList = resp.data.data
                })
            },
            addCart(book_id, stock_number) {
                if (stock_number === 0) {
                    this.$message({
                        message: '库存不足',
                        type: 'error',
                        duration: 2000
                    });
                    return
                }
                let data = new URLSearchParams()
                data.append('method', 'save')
                data.append('book_id', book_id)
                axios({
                    method: 'post',
                    url: 'carts',
                    data: data
                }).then(resp => {
                    if (resp.data.success) {
                        this.loadBooksData()
                        this.$message({
                            message: '加入购物车成功',
                            type: 'success',
                            duration: 2000
                        });
                    } else {
                        this.$message({
                            message: '加入购物车失败',
                            type: 'error',
                            duration: 2000
                        });
                    }
                })
            }
        },
        created() {
            // 加载数据
            this.loadBooksData()
            // 登陆的内容
            if (this.token === null || this.token === undefined) {
                this.flag = false
            } else {
                this.flag = true
                this.username = JSON.parse(this.token).username
            }
        }
    })
</script>